<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- JavaScript:核心语法+DOM （针对页面操作）+BOM（针对浏览器操作）
            学习主体：针对页面操作比较多---DOM操作
            JQuery操作DOM：理解：JQ框架改变页面内容效果
            js基础就可以直接学习，了解函数使用
            基础函数-----事件源之后出现，事件源语法当中
            html()     作用：增加一个元素，覆盖原有html
            val()       作用：针对input元素，实现修改文本框内容
            text()      作用：生成文本内容
         -->
         <script src="js/jquery-1.11.1.js"></script>
         <style>
             div{
                 width: 200px;
                 height: 200px;
                 background: #333;
             }
         </style>
    </head>
    <body>
        <!-- 鼠标点击按钮，然后，改变下面产生一行文本 -->
        <button>按钮</button>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo dolore autem exercitationem libero nemo, officia ex voluptatum eveniet molestias non ad minima sed suscipit velit voluptatibus. Praesentium cumque dolores excepturi.</p>
        
        <div></div>
        <h3>lorem</h3>
        
        <input type="button" value="按钮二" />
        <input type="text" />
        <script>
            // $("button").click(function(){
            //     // JQ操作DOM---html()函数使用
            //     $("p").html("<h1>JQ操作DOM-html函数使用</h1>");
            // });
            // 练习1：div 200*200 背景颜色:黑色，下面有一行文本，鼠标滑过之后，下面内容修改：<h3>提示，修改为黄颜色
            $("div").mouseenter(function(){
                $("h3").html("<h3>黄颜色</h3>");
            });
            // 练习2：按钮 文本框    点击按钮，文本增加一行文本
            $("input[type='button']").click(function(){
                // alert("jq选择器是否选中");
                $("input[type='text']").val("文本框内容修改~");
            });
            // 利用JQ操作DOM(页面效果)：1.元素内容操作(3个函数)
            //                          html()
            //                          val()
            //                          text()
            //                        2.属性操作(4个函数)
            //                          <p align="center">
            //                          attr()
            //                          removeAttr()
            //                          <input checked>
            //                          prop()
            //                          removeProp()
            //                        3.样式类名操作(4个函数)
            //                          .demo{属性：属性值..}
            //                          addClass()
            //                          removeClass()
            //                          toggleClass()
            //                          hasClass()
            //                        4.元素样式操作(5个函数)
            //                          css()
            //                          width()和height()
            //                          outerWidth()和outerHeight()
            //                        5.插入和删除修改操作(7个函数)
            //                          append()和prepend()
            //                          after()和before()
            //                          remove()和empty()
            //                          replaceWith()
            //                        6.元素遍历操作(6个函数)
            //                        7.JQ动画操作(7个函数)
        </script>
    </body>
</html>